<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
</head>
<body>
    <head></head>
    <main id="zzz">
        <div class="wrapper" id="main">

        </div>
    </main>
    <footer></footer>
<script>
    //1.初始化数据
    var keys = {
        '0': { 0: 'q', 1: 'w', 2: 'e', 3: 'r', 4: 't', 5: 'y', 6: 'u', 7: 'i', 8: 'o', 9: 'p', lenght: 10 },
        '1': { 0: 'a', 1: 's', 2: 'd', 3: 'f', 4: 'g', 5: 'h', 6: 'j', 7: 'k', 8: 'l', lenght: 9 },
        '2': { 0: 'z', 1: 'x', 2: 'c', 3: 'v', 4: 'b', 5: 'n', 6: 'm', lenght: 7 },
        'lenght': 3
    }
    var hash = {'q':'qq.com','w':'weibo.com','e':'eleme.com','z':'zhihu.com'}
    hashInLocalStorage = JSON.parse(localStorage.getItem('ooo') || 'null')  //取出localStorage中ooo对应的hash ‘null’表示没有存入且没有网址
    if (hashInLocalStorage) {    //看hash是否被更改
        hash = hashInLocalStorage   //如果更改，覆盖之前的hash
    }

    //2生成键盘
    var index = 0
    while (index < keys['lenght']){
        var div = document.createElement('div')
        main.appendChild(div)            //创建div
        var row = keys[index]       //获取 q w e r...
        var index2 = 0
        while (index2 < row['lenght']) {  //确定创建kdb的个数10 9 7
            var kbd = document.createElement('kbd')
            var span = document.createElement('span')
            span.textContent = row[index2]
            span.className = 'text'
            var buttonX = document.createElement('button') //创建button按键
            buttonX.textContent = 'E'
            buttonX.id = row[index2] //根据id，确定每一个button按钮
            var img = document.createElement('img')
             if (hash[row[index2]]) {
                img.src = 'http://' + hash[row[index2]] + '/favicon.ico'
            } else {
                img.src = '//i.loli.net/2018/03/31/5abf636cd255b.png'
            }
            img.onerror = function (img2) {
                img2.target.src = '//i.loli.net/2018/03/31/5abf636cd255b.png'
                
            }
            buttonX.onclick = function (jjjjj) {     //button被点击
                var button2 = jjjjj['target']
                var img3 = button2.previousSibling
                var kk = button2['id']   //确定点击的是哪一个button q w e.. 
                var xx = prompt('存入网址')    //输入你要存入的网址
                hash[kk] = xx   //将用户输入的网址存入点击的这个kk里
                img3.src = 'http://' + xx + '/favicon.ico'
                img3.onerror = function (img2) {
                    img2.target.src = '//i.loli.net/2018/03/31/5abf636cd255b.png'
                }       
                localStorage.setItem('ooo',JSON.stringify(hash))    //只要hash变了就把hash存入ooo
            }
            kbd.appendChild(span)
            kbd.appendChild(img)
            div.appendChild(kbd)
            kbd.appendChild(buttonX)
            index2 = index2 + 1
        }
        index = index + 1
    }
    document.onkeypress = function (jjjjj) {    //用户点击
        var key = jjjjj['key']      //用户点击的哪个字母
        var website = hash[key]     //字母对应的网站
        // location.href = 'http://'+ website
        window.open('http://' + website, '_blank')  //在新的窗口打开网址
    }
</script>
</body>
</html>